<template>
	<view class="content">
		<scroll-view
			scroll-y
			class="scroll"
			refresher-enabled
			:refresher-triggered="isLoading"
			@scrolltolower="onBottomLoad"
			@refresherrefresh="onRefreshData"
		>
			<view class="list" v-if="list.length">
				<view class="news-wrap" v-for="item in list" :key="item" @click="onOpenFile(item.orderId)">
					<view class="news">
						<image :src="item.raceImg" class="news-img" mode="aspectFill"></image>
						<view class="news-right">
							<u--text
								:text="item.raceName"
								size="28rpx"
								lines="1"
								color="#898989"
								margin="6rpx 0 20rpx"
							></u--text>
							<view class="news-btn">
								<u-button
									text="成绩查询"
									color="#e50012"
									shape="circle"
									size="small"
									customStyle="width:150rpx;height:52rpx;font-size:32rpx"
									:throttleTime="1500"
									:hoverStopPropagation="true"
									@click.native.stop="onOpenFile(item.orderId)"
								></u-button>
							</view>
							<u--text :text="item.groupName" bold size="28rpx" lines="1" color="#333"></u--text>
							<u--text
								:text="`比赛时间： ${item.groupStartTime}`"
								size="26rpx"
								lines="1"
								color="#898989"
								margin="10rpx 0 0"
							></u--text>
						</view>
					</view>
				</view>
				<u-loadmore
					fontSize="13"
					line
					marginTop="18"
					:status="status"
					loading-text="努力加载中~"
					loadmore-text="上拉加载更多~"
				/>
			</view>
			<view style="padding-top: 300rpx" v-else>
				<u-empty mode="list" width="250" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			status: 'nomore', // loadmore / loading / nomore
			list: [],
			pages: 1
		}
	},
	onLoad() {
		this.isLoading = true
	},
	methods: {
		getOrderList() {
			this.status = 'loading'
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/order/list/'+this.pages,
				data: {isGrade: 1} //区分订单列表
			},(res) => {
				// “isResult”字段控制是否上传成绩，如果是1就显示，0就不显示（没出成绩）
				const result = res.data.filter(item=>item.isResult==1)
				this.list = this.list.concat(result)
				this.isLoading= false
				if(result.length<10){
					this.status = 'nomore'
				}else{
					this.status = 'loadmore'
				}
			},(error)=>{
				this.isLoading = false
			})
			/* prettier-ignore */
		},
		// 下拉刷新
		onRefreshData() {
			this.isLoading = true
			this.pages = 1
			this.list = []
			this.getOrderList()
		},
		// 上拉加载
		onBottomLoad() {
			if (this.status === 'loadmore') {
				this.pages++
				this.getOrderList()
			}
		},
		goDetail(id) {
			this.$utils.navigateTo(true, `/pagesA/my/order/detail?id=${id}`)
		},
		onOpenFile(id) {
			this.$utils.navigateTo(true, `/pagesA/my/grade/detail?id=${id}`)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	position: relative;
}
.scroll {
	width: 100%;
	height: 100vh;
}
.list {
	padding: 20rpx 26rpx;
	.news {
		display: flex;
		position: relative;
		&-wrap {
			width: calc(100% - 40rpx);
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx;
		}
		&-img {
			width: 200rpx;
			height: 200rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 460rpx;
			width: 460rpx;
		}
		&-btn {
			display: flex;
			justify-content: flex-end;
		}
	}
}
.flex-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 12rpx 24rpx 24rpx;
}
::v-deep {
	.u-button {
		margin: 0 !important;
	}
}
</style>
